<template>
  <div id="loginA" style="background-image: url(static/backgroundA.png)">
    <el-row class="login-box-adjustment">
      <el-col :span="8" :offset="12">
        <el-row type="flex" justify="center" class="tags">
          <el-col :span="12">
            <div :class="{role: true, 'role-select': select === 'user', 'role-unselect': select !== 'user'}" v-on:click="selectRole('user')"><span>我是用户</span></div>
          </el-col>
          <el-col :span="12">
            <div :class="{role: true, 'role-select': select === 'seller', 'role-unselect': select !== 'seller'}" v-on:click="selectRole('seller')"><span>我是商家</span></div>
          </el-col>
        </el-row>
        <div class="login-box">
          <el-row type="flex" align="middle" justify="center">
            <el-col :span="19">
              <div class="icon-box-left"></div>
              <div class="login-text login-text-adjustment">欢迎登录</div>
              <div class="icon-box-right"></div>
              <el-row>
                <el-form label-position="top" :model="form" class="form-adjustment" :rules="rules" ref="form">
                  <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username"></el-input>
                  </el-form-item>
                  <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="form.password" v-on:keydown.enter.native="submit('form')"></el-input>
                  </el-form-item>
                </el-form>
                <el-col :span="12">
                  <el-button v-on:click="submit('form')">登录</el-button>
                </el-col>
                <el-col :span="12">
                  <div class="form-register-font" v-on:click="register">没有账号？注册一个</div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "loginA",
  data() {
    return {
      select: 'user',
      form: {
        username: null,
        password: null
      },
      rules: {
        username: [
          {required: true, message: "请输入用户名", trigger: "blur"},
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"},
        ]
      }
    }
  },
  methods: {
    submit: function (form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.select === "user") {
            this.$api.user.userLogin({
              password: this.form.password,
              username: this.form.username
            }).then(res => {
              console.log("login", res);
              if (res.data.code === 200) {
                sessionStorage.setItem("userId", res.data.data.User.userId);
                sessionStorage.setItem("username", res.data.data.User.username);
                sessionStorage.setItem("phone", res.data.data.User.phone);
                sessionStorage.setItem("transactionAddress", res.data.data.User.transactionAddress);
                sessionStorage.setItem("role", "user");
                sessionStorage.setItem("token", res.data.data.token);
                this.$router.push({
                  path: '/home_A'
                })
              } else if (res.data.code === 500) {
                this.$message({
                  message: "用户名或密码不正确",
                  type: "error"
                })
              }
            })
          } else if (this.select === "seller") {
            this.$api.seller.login({
              password: this.form.password,
              userName: this.form.username
            }).then(res => {
              console.log("sellerLogin", res);
              if (res.data.code === 200) {
                sessionStorage.setItem("userId", res.data.data.seller.userId);
                sessionStorage.setItem("username", res.data.data.seller.userName);
                sessionStorage.setItem("role", "seller");
                sessionStorage.setItem("token", res.data.data.token);
                this.$router.push({
                  path: '/seller_home'
                })
              } else if (res.data.code === 500) {
                this.$message({
                  message: "用户名或密码不正确",
                  type: "error"
                })
              }
            })
          }
        } else {
          return false;
        }
      })
    },
    register: function () {
      this.$router.push({
        path: '/Register'
      })
    },
    selectRole: function (value) {
      this.select = value;
    }
  }
}
</script>

<style scoped>
#loginA {
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
}
.login-box {
  width: 600px;
  height:450px;
  background: rgba(255, 255, 255, 0.8);
  border-radius:0 0 25px 25px;
}
.tags {
  width: 600px;
}
.login-box-adjustment {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 500px;
}
.login-text {
  font-size: 36px;
  font-weight: bold;
  color: #363636;
  display: inline-block;
}
.form-adjustment {
  padding-top: 20px;
}
.icon-box-left {
  display: inline-block;
  background: -webkit-linear-gradient(to right, rgba(0, 0, 0, 0) , #363636); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(to right, rgba(0, 0, 0, 0) , #363636); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(to right, rgba(0, 0, 0, 0) , #363636); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, rgba(0, 0, 0, 0) , #363636); /* 标准的语法 */
  width: 150px;
  height: 5px;
}
.icon-box-right {
  display: inline-block;
  background: -webkit-linear-gradient(to left, rgba(0, 0, 0, 0) , #363636); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(to left, rgba(0, 0, 0, 0) , #363636); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(to left, rgba(0, 0, 0, 0) , #363636); /* Firefox 3.6 - 15 */
  background: linear-gradient(to left, rgba(0, 0, 0, 0) , #363636); /* 标准的语法 */
  width: 150px;
  height: 5px;
}
.login-text-adjustment {
  padding-top: 20px;
}
.form-register-font {
  text-decoration: underline;
  color: #B0E0E6;
  font-size: 20px;
  padding-top: 20px;
  padding-left: 50px;
  cursor: pointer;
}
/deep/ .el-form-item__label {
  font-size: 24px;
  font-weight: 500;
}
/deep/ .el-input__inner {
  border-radius: 20px;
}
/deep/ .el-button {
  width: 180px;
  height: 50px;
  border: 2px solid rgba(0, 0, 0, 0);
  border-radius: 20px;
  outline: none;
  background: #B0E0E6;
  font-size: 24px;
  color: white;
}
.el-button:hover {
  background: rgba(176, 224, 230, 0.6);
  box-shadow: 0 0 0 2px rgba(176, 224, 230, 1);
}
.role {
  text-align: center;
  font-size: 20px;
  height: 50px;
  color: #7D7D7D;
  font-weight: 500;
  border-radius: 20px 20px 0 0;
  line-height: 50px;
  cursor: pointer
}
.role-unselect {
  background: rgba(134, 233, 214, 1);
  color: white;
}
.role-select {
  background: rgba(255, 255, 255, 0.8);
}
</style>
